<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="myList">
        <li id="item1">Coffee</li>
        <li id="item2">Tea</li>
    </ul>
    <button onclick="myFunction()">点我</button>
    <div id="demo">
        <li id="item3">牛奶</li>
    </div>
    <script>
        function myFunction(){
            // nextSibling 与 nextElementSibling 区别
            // nextSibling可能是换行空格的文本，注释节点，元素节点
            // nextElementSibling只获取下一个节点的元素节点
            var item1 = document.getElementById("item1");
            console.dir(item1.nextSibling)  
            console.dir(item1.nextElementSibling)
        }


    </script>
</body>
</html>